<template>
  <view id="main">
    <yz-bg multiBg />
    <yz-topBar showBack height="40" color="#000" />
    <scroll-view class="scroll_view" scroll-y>
      <view class="content">
        <!-- top_tag -->
        <view :class="[handleWoundedStore.TagStatus]" class="card list_item">
          <view class="tag top_tag fs_12"> 伤票码 </view>
          <view class="card_content">
            <view class="handle_box flex">
              <view class="code fs_17 color_black text_overflow">
                {{ woundedData.TagCode }}
              </view>
              <view class="right_box flex">
                <view class="tag">
                  {{ woundedData.TagStatusName || '--' }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 伤票信息 -->
        <view class="wounded_item wounded_info">
          <view class="title fs_14 color_gray">伤票信息</view>
          <view class="card">
            <view class="card_item">
              <view class="label">姓名</view>
              <view class="handle_box">
                <input
                  :disabled="disable"
                  v-model="handleWoundedStore.woundedData.Name"
                  placeholder="请输入"
                  placeholder-style="color: #CCCCD3;font-size:14px"
                />
              </view>
            </view>
            <view class="card_item">
              <view class="label">年龄</view>
              <view class="handle_box">
                <input
                  :disabled="disable"
                  type="number"
                  v-model="handleWoundedStore.woundedData.Age"
                  placeholder="请输入"
                  placeholder-style="color: #CCCCD3;font-size:14px"
                />
              </view>
            </view>
            <view class="card_item" @tap="showPopup('sex')">
              <view class="label">性别</view>
              <view class="handle_box flex">
                <input
                  :value="sexName"
                  placeholder="请选择"
                  disabled
                  placeholder-style="color: #CCCCD3;font-size:14px"
                />
                <uni-icons v-if="!disable" type="right" color="#8D8F9B" size="24" />
              </view>
            </view>
            <view class="card_item">
              <view class="label">部职别</view>
              <view class="handle_box">
                <input
                  :disabled="disable"
                  v-model="handleWoundedStore.woundedData.Department"
                  placeholder="请输入"
                  placeholder-style="color: #CCCCD3;font-size:14px"
                />
              </view>
            </view>
          </view>
        </view>
        <!-- 伤情记录 -->
        <view class="wounded_item wounded_info">
          <view class="title fs_14 color_gray">伤情记录</view>
          <view class="card">
            <!-- 视频 -->
            <view class="card_item">
              <view class="label">视频</view>
              <view class="handle_box video">
                <view v-if="!disable" @tap="showPopup('video')" class="upload_box card_list_item">
                  <view class="center_box">
                    <view class="icon_box">
                      <image class="mini_Icon" src="@/static/icon/video.png" />
                    </view>
                    <view class="text fs_12 color_gray"> 上传视频 </view>
                  </view>
                </view>
                <view
                  v-for="(item, index) in handleWoundedStore.videoList.list"
                  class="card_list_item"
                >
                  <image @tap="showvideoPopup(item.src)" src="@/static/icon/treatment.png" />
                  <view v-if="!disable" @tap.stop="handleDel(item, index, 'video')">
                    <uni-icons class="close_icon" type="clear" color="#CDD0D6" size="20" />
                  </view>
                </view>
              </view>
            </view>
            <!-- 图片 -->
            <view class="card_item">
              <view class="label">图片</view>
              <view class="handle_box">
                <view v-if="!disable" @tap="showPopup('image')" class="upload_box card_list_item">
                  <view class="center_box">
                    <view class="icon_box">
                      <image class="mini_Icon" src="@/static/icon/pic.png" />
                    </view>
                    <view class="text fs_12 color_gray"> 上传图片 </view>
                  </view>
                </view>
                <view
                  v-for="(item, index) in handleWoundedStore.imageList.list"
                  class="card_list_item"
                >
                  <image @tap="previewImage(item.src)" :src="item.src" />
                  <uni-icons
                    v-if="!disable"
                    @tap="handleDel(item, index, 'image')"
                    class="close_icon"
                    type="clear"
                    color="#CDD0D6"
                    size="20"
                  />
                </view>
              </view>
            </view>
            <!-- 音频 -->
            <view class="card_item">
              <view class="label">音频</view>
              <view class="handle_box audio">
                <view v-if="!disable" @tap="showPopup('audio')" class="upload_box card_list_item">
                  <view class="center_box">
                    <view class="icon_box">
                      <image class="mini_Icon" src="@/static/icon/audio.png" />
                    </view>
                    <view class="text fs_12 color_gray"> 上传音频 </view>
                  </view>
                </view>
                <view
                  v-for="(item, index) in handleWoundedStore.audioList.list"
                  class="card_list_item"
                >
                  <view class="audio_item flex">
                    <view @tap="playAudio(item)" class="icon_box">
                      <image
                        v-if="!item.isplay"
                        class="mini_Icon"
                        src="@/static/icon/edit-audio-play.png"
                      />
                      <image v-else class="mini_Icon" src="@/static/icon/edit-audio-stop.png" />
                    </view>
                    <view class="center_box">
                      <view class="text fs_14 color_black">
                        {{ index + 1 }}.{{ item.FileFormName }}
                      </view>
                    </view>
                  </view>
                  <uni-icons
                    v-if="!disable"
                    @tap="handleDel(item, index, 'audio')"
                    class="close_icon"
                    type="clear"
                    color="#CDD0D6"
                    size="20"
                  />
                </view>
              </view>
            </view>
            <!-- 伤情描述 -->
            <view class="card_item">
              <view class="label">伤情描述</view>
              <view class="text_area">
                <textarea
                  :disabled="disable"
                  v-model="handleWoundedStore.woundedData.InjuryRemark"
                  placeholder="请输入"
                  placeholder-style="color: #CCCCD3;font-size:14px"
                />
              </view>
            </view>
          </view>
        </view>
        <!-- 后送去向 -->
        <view
          v-if="handleWoundedStore.TagStatus !== 'TagStatus1'"
          class="wounded_item wounded_info"
        >
          <view class="title fs_14 color_gray">后送去向</view>
          <view class="card">
            <view @tap="showPopup('GoDest')" class="card_item">
              <view class="label">后送去向</view>
              <view class="handle_box flex">
                <input
                  :value="goDestName"
                  placeholder="请选择"
                  disabled
                  placeholder-style="color: #CCCCD3;font-size:14px"
                />
                <uni-icons v-if="!disable" type="right" color="#8D8F9B" size="24" />
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 保存 -->
      <view class="footer">
        <!-- 诊疗中 -->
        <view v-if="handleWoundedStore.TagStatus === 'TagStatus2'" class="GoDest">
          <view @tap="handleTreatSave" class="button save">保存</view>
          <view @tap="handleTreatGoDest" class="button">后送</view>
        </view>
        <!-- 后送伤票 -->
        <view v-else-if="handleWoundedStore.TagStatus === 'TagStatus3'" class="button">返回</view>
        <!-- 待分配 -->
        <view v-else @tap="handleDistributionSave" class="button"> 保存 </view>
      </view>
    </scroll-view>
    <!-- popup -->
    <uni-popup @maskClick="closePopup" ref="popup" type="bottom">
      <view class="popup_content" :class="popupType">
        <uni-icons @tap="closePopup" type="closeempty" color="#8D8F9B" size="18" />
        <view class="title">
          <view class="title_text flex">
            <view class="fs_16 color_black">
              {{ popupTitle }}
            </view>
            <view
              v-if="popupType !== 'sex' && popupType !== 'GoDest'"
              class="tips fs_12 color_gray"
            >
              {{ popupMsg }}
            </view>
          </view>
        </view>
        <!-- sex -->
        <view v-if="popupType === 'sex'" class="popup_item sex">
          <view class="item_content flex">
            <view class="sex_item image_box flex">
              <view
                :class="[sexItem == 'SexType1' ? 'active' : '']"
                @tap="handleSex('SexType1')"
                class="icon_box"
              >
                <image class="mini_Icon" src="@/static/icon/man.png" />
              </view>
              <view class="text fs_12 color_black">男</view>
            </view>
            <view class="sex_item image_box flex">
              <view
                :class="[sexItem == 'SexType2' ? 'active' : '']"
                @tap="handleSex('SexType2')"
                class="icon_box"
              >
                <image class="mini_Icon" src="@/static/icon/woman.png" />
              </view>
              <view class="text fs_12 color_black">女</view>
            </view>
          </view>
        </view>
        <!-- video -->
        <view v-if="popupType === 'video'" class="popup_item video">
          <view class="item_content flex">
            <view @tap="chooseVideo('camera')" class="image_box flex">
              <view class="icon_box">
                <image class="small_Icon" src="@/static/icon/video-recor.png" />
              </view>
              <view class="text fs_12 color_black">录制视频</view>
            </view>
            <view @tap="chooseVideo('album')" class="image_box flex">
              <view class="icon_box">
                <image class="small_Icon" src="@/static/icon/local-video.png" />
              </view>
              <view class="text fs_12 color_black">本地视频</view>
            </view>
          </view>
        </view>
        <!-- audio -->
        <view v-if="popupType === 'audio'" class="popup_item audio">
          <view v-if="!showRecord" class="item_content flex">
            <view @tap="GoRecord" class="image_box flex">
              <view class="icon_box">
                <image class="small_Icon" src="@/static/icon/sound-record.png" />
              </view>
              <view class="text fs_12 color_black">录制音频</view>
            </view>
            <view @tap="chooseAudio('file')" class="image_box audio_box flex">
              <view class="icon_box">
                <image class="small_Icon" src="@/static/icon/local-audio.png" />
              </view>
              <view class="text fs_12 color_black">本地音频</view>
            </view>
          </view>
          <view v-if="showRecord" class="item_content flex">
            <view @tap="delRecord" v-if="overRecord" class="image_box flex">
              <view class="icon_box del_audio">
                <image class="small_Icon" src="@/static/icon/audio-del.png" />
              </view>
            </view>
            <view
              @tap="starRecord"
              v-show="showRecord && !Recording && !overRecord"
              class="image_box flex"
            >
              <view class="icon_box play_audio">
                <image class="large_Icon" src="@/static/icon/audio-mike.png" />
              </view>
              <view class="text fs_12 color_black">点击开始</view>
            </view>
            <view @tap="playVoice" v-show="overRecord" class="image_box flex">
              <view class="icon_box play_audio">
                <image v-if="!play_audio" class="large_Icon" src="@/static/icon/audio-play.png" />
                <image v-else class="large_Icon" src="@/static/icon/audio-stop.png" />
              </view>
              <view class="text fs_12 color_black">点击播放</view>
            </view>
            <view @tap="endRecord" v-show="Recording" class="image_box flex">
              <view class="icon_box play_audio">
                <image class="large_Icon" src="@/static/icon/audio-stop.png" />
              </view>
              <view class="text fs_12 color_black">点击结束</view>
            </view>
            <view v-show="overRecord" @tap="confirmAudio" class="image_box flex">
              <view class="icon_box choose_audio">
                <image class="small_Icon" src="@/static/icon/audio-true.png" />
              </view>
            </view>
          </view>
          <!-- @touchstart="starRecord" @touchend="endRecord"  -->
        </view>
        <!-- image -->
        <view v-if="popupType === 'image'" class="popup_item image">
          <view class="item_content flex">
            <view @tap="chooseImage('camera')" class="image_box flex">
              <view class="icon_box">
                <image class="small_Icon" src="@/static/icon/take-picture.png" />
              </view>
              <view class="text fs_12 color_black">拍照</view>
            </view>
            <view @tap="chooseImage('album')" class="image_box flex">
              <view class="icon_box">
                <image class="small_Icon" src="@/static/icon/photo.png" />
              </view>
              <view class="text fs_12 color_black">照片</view>
            </view>
          </view>
        </view>
        <!-- 后送去向 -->
        <view v-if="popupType === 'GoDest'" class="popup_item GoDest">
          <scroll-view class="scroll_view" scroll-y>
            <view class="item_content flex">
              <view
                :class="[goDestCode == item.DictCode ? 'active' : '']"
                @tap="handleGoDest(item)"
                v-for="(item, index) in handleWoundedStore.goDestData.goDestList"
                :key="item.DictCode"
                class="item fs_14 color_black"
              >
                {{ item.DictName }}
              </view>
            </view>
          </scroll-view>
        </view>
        <view v-if="popupType == 'GoDest' || popupType == 'sex'" class="confirm flex">
          <view @tap="popupConfirm(popupType)" class="button"> 确定 </view>
        </view>
      </view>
    </uni-popup>
    <!-- videopopup -->
    <uni-popup @maskClick="videopopuppause" ref="videopopup" type="center">
      <view id="videopopup_content">
        <video id="video" v-if="videopopupSrc" :src="videopopupSrc"></video>
      </view>
    </uni-popup>
  </view>
  <yz-tips v-if="toast.show" :title="toast.title"> </yz-tips>
</template>

<script setup lang="ts">
import { useToastStore } from '@/stores/modules/toast'
const toast = useToastStore()
import { useMediaStore } from '@/stores/modules/media'
import { useHandleWoundedStore } from '@/stores/modules/handlewounded'
import { onLoad } from '@dcloudio/uni-app'
const mediaStore = useMediaStore()
const handleWoundedStore = useHandleWoundedStore()
let woundedData: any = ref('')
const TagCode = ref<string>('')
const TagStatus1Scan = ref<string>('') //是否待分配扫码进入页面
onLoad(async (options: any) => {
  console.log('handleWounded onLoad', options)
  TagStatus1Scan.value = options?.TagStatus1Scan || ''
  TagCode.value = options.TagCode
})
const disable = computed(() => {
  return handleWoundedStore.TagStatus === 'TagStatus3'
})
//后送去向
const goDestName = ref<string>('')
// 页面初始化
onMounted(async () => {
  let resdata: any = ''
  if (TagStatus1Scan.value) {
    console.log('待分配扫码进入页面')
    resdata = await handleWoundedStore.scanWounded(TagCode.value)
  } else {
    resdata = await handleWoundedStore.findWounded(TagCode.value)
  }
  console.log('handleWounded onMounted', resdata)

  woundedData.value = resdata
  handleWoundedStore.getGodestList()
  sexItem.value = handleWoundedStore.woundedData.Sex
  goDestCode.value = handleWoundedStore.woundedData.GoDest
  goDestName.value = resdata.GoDestName
})
//性别
const sexName = computed(() => {
  return handleWoundedStore.woundedData.Sex == 'SexType1'
    ? '男'
    : handleWoundedStore.woundedData.Sex == 'SexType2'
      ? '女'
      : ''
})
//待配送状态保存
const handleDistributionSave = async () => {
  await handleWoundedStore.editWounded('TagStatus1')
}
//诊疗中保存
const handleTreatSave = async () => {
  await handleWoundedStore.editWounded('TagStatus2')
}
//转为后送
const handleTreatGoDest = async () => {
  uni.showModal({
    title: '提示',
    content: '请确认已保存数据！',
    confirmText: '确定',
    cancelText: '取消',
    confirmColor: '#02bdc6',
    success: async (res: any) => {
      if (res.confirm) {
        await handleWoundedStore.afterWounded()
        woundedData.value.TagStatusName = '已后送'
      }
    },
  })
}
// 删除图片/视频/音频
const handleDel = async (item: any, index: number, type: string) => {
  await handleWoundedStore.deleteMedia(item, index, type)
}
//  选择性别
const sexItem = ref<string>('')
const handleSex = (sex: string) => {
  sexItem.value = sex
}
// 后送去向
const goDestCode = ref<string>('')
const handleGoDest = (item: any) => {
  goDestCode.value = item.DictCode
  handleWoundedStore.woundedData.GoDest = item.DictCode
  goDestName.value = item.DictName
}
//popup 确定
const popupConfirm = (type: string) => {
  switch (type) {
    case 'sex':
      handleWoundedStore.woundedData.Sex = sexItem.value
      break
    case 'GoDest':
      handleWoundedStore.woundedData.GoDestCode = goDestCode.value
      break
  }
  setTimeout(() => {
    popup.value.close()
  }, 300)
}
// 弹窗
const popup = ref<any>(null)
const popupType = ref<string>('')
const popupTitle = ref<string>('')
const popupMsg = ref<string>('')
const showPopup = (type: string) => {
  if (disable.value) return
  popupType.value = type
  switch (type) {
    case 'sex':
      popupTitle.value = '性别'
      popupMsg.value = ''
      break
    case 'video':
      popupTitle.value = '视频'
      popupMsg.value = '请选择上传视频方式'
      break
    case 'audio':
      popupTitle.value = '音频'
      popupMsg.value = '请选择上传音频方式'
      break
    case 'GoDest':
      popupTitle.value = '后送去向'
      popupMsg.value = ''
      break
    case 'image':
      popupTitle.value = '图片'
      popupMsg.value = '请选择上传图片方式'
      break
  }
  popup.value.open()
}
const closePopup = () => {
  popup.value.close()
  showRecord.value = false
  Recording.value = false
  startRecord.value = false
  overRecord.value = false
}
// 选择视频
const chooseVideo = async (type: string) => {
  await handleWoundedStore.uploadVideo(type)
  popup.value.close()
}

//视频 弹窗
const videopopup = ref<any>(null)
const videoContext: any = ref(null)
const videopopupSrc = ref<string>('')
const showvideoPopup = (src: string) => {
  videopopup.value.open()
  videopopupSrc.value = src
  videoContext.value = uni.createVideoContext('video')
}
//暂停视频
const video: any = ref(null)
const videopopuppause = () => {
  videoContext.value.pause()
  videoContext.value.stop()
  videopopupSrc.value = ''
}
// 选择图片
const chooseImage = async (type: string) => {
  await handleWoundedStore.uploadImage(type)
  popup.value.close()
}
//图片预览
const previewImage = (src: string) => {
  uni.previewImage({
    urls: handleWoundedStore.imageList.list.map((el: any) => el.src),
    current: src,
  })
}
// 选择音频
// #ifdef APP
const recorderManager: any = uni.getRecorderManager()
const innerAudioContext: any = uni.createInnerAudioContext()
const voicePath = ref<string>('') //录音文件路径
onLoad(() => {
  recorderManager.onStop(function (res: any) {
    console.log('recorder stop' + res)
    //保存录音文件路径
    voicePath.value = res.tempFilePath
  })
})
innerAudioContext.autoplay = true
// #endif
// 选择音频
const chooseAudio = async (type: string) => {
  await handleWoundedStore.uploadAudio('audio')
  closePopup()
}

//开始录音
const showRecord = ref(false) //是否显示录音按钮
const Recording = ref(false) //是否正在录音
const startRecord = ref(false) //是否开始录音
const overRecord = ref(false) //录音完成
//打开录音界面
const GoRecord = (e: any) => {
  popupTitle.value = '录制音频'
  popupMsg.value = '点击按钮开始录制'
  showRecord.value = true
}
//开始录音
const starRecord = () => {
  console.log('开始录音')
  recorderManager.start()
  Recording.value = true
  popupMsg.value = '正在录音'
  uni.showToast({
    title: '录音中',
  })
  startRecord.value = true
}
//结束录音
const endRecord = () => {
  console.log('结束录音')
  recorderManager.stop()
  Recording.value = false
  popupMsg.value = '录音结束'
  overRecord.value = true
  uni.showToast({
    title: '录音结束',
  })
}
//播放录音
const play_audio = ref(false)
const playVoice = () => {
  if (!play_audio.value) {
    console.log('播放录音', voicePath.value)
    play_audio.value = true
    innerAudioContext.src = voicePath.value
    innerAudioContext.play()
    innerAudioContext.onTimeUpdate((e: any) => {
      console.log('onTimeUpdate', expoIn)
    })
  } else {
    innerAudioContext.pause()
    play_audio.value = false
  }
}
//播放音频
const playAudio = (item: any) => {
  if (item.isplay) {
    item.isplay = false
    innerAudioContext.pause()
  } else {
    handleWoundedStore.audioList.list.forEach((el: any) => {
      el.isplay = false
    })
    item.isplay = true
    innerAudioContext.src = item.src
    innerAudioContext.onCanplay(() => {
      item.max = parseInt(innerAudioContext.duration)
    })
    innerAudioContext.onEnded(() => {
      item.isplay = false
    })
    console.log('播放音频', item)
    innerAudioContext.play()
  }
}
//音频进度条
const sliderChange = (e: any, item: any) => {
  console.log('sliderChange', e, item)
}
//
const sliderChanging = (e: any, item: any) => {
  console.log('sliderChanging', e, item)
}
//删除录音
const delRecord = () => {
  console.log('删除录音')
  showRecord.value = false
  Recording.value = false
  startRecord.value = false
  overRecord.value = false
  voicePath.value = ''
  popupMsg.value = '点击按钮开始录制'
  uni.showToast({
    title: '删除成功',
  })
}
// #ifdef APP
//播放录音结束
innerAudioContext.onEnded(() => {
  play_audio.value = false
})
// #endif
//确认音频
const confirmAudio = async () => {
  console.log('确认音频', voicePath.value)
  handleWoundedStore.upLoadFile(voicePath.value, 'audio')
  closePopup()
}
</script>

<style lang="scss" scoped>
#main {
  .card {
    padding: 20px 12px;
    width: 100%;
  }
  .scroll_view {
    height: calc(100vh - 50px - 24px);
  }
  .content {
    padding: 0 12px;
    .list_item {
      margin: 10px 0;
      padding: 24px 12px 12px;
      position: relative;
      .tag {
        border-radius: 4px;
        padding: 4px 8px;
        font-size: 10px;
        &.top_tag {
          border-radius: 0px 0px 4px 4px;
          position: absolute;
          font-size: 12px;
          top: 0;
          left: 12px;
        }
      }
      //待分配
      &.TagStatus1 {
        .tag {
          color: #f49b0a;
          background: rgb(255, 242, 226);
        }
      }
      //诊疗中
      &.TagStatus2 {
        .tag {
          color: #00bec5;
          background: rgb(229, 248, 248);
        }
      }
      //后送伤票
      &.TagStatus3 {
        .tag {
          color: #1064fb;
          background: rgb(221, 233, 255);
        }
      }
      .card_content {
        .handle_box {
          margin-top: 10px;
          justify-content: space-between;
          .text_overflow {
            max-width: 70%;
          }
        }
      }
    }
    .wounded_item {
      margin: 14px 0;
      .title {
        margin: 6px 0;
      }
      .card {
        .card_item {
          margin-bottom: 10px;
          .label {
            font-size: 13px;
            color: #2e323d;
            margin-bottom: 8px;
          }
          textarea {
            background-color: #f9f9f9;
            padding: 10px;
          }
          .handle_box {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            &.flex {
              justify-content: space-between;
            }
            .card_list_item {
              border-radius: 6px;
              margin: 10px 5px;
              width: 68px;
              height: 68px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-around;
              box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
              position: relative;
              image {
                border-radius: 6px;
                width: 100%;
                height: 100%;
              }
              .close_icon {
                position: absolute;
                top: -10px;
                right: -10px;
              }
            }
            .upload_box {
              border: 0.6px dashed rgb(205, 205, 205);

              background: rgb(249, 249, 249);
              .center_box {
                display: flex;
                flex-direction: column;
                align-items: center;
                .icon_box {
                  width: 28px;
                  height: 28px;
                  border: 0.6px dashed rgb(205, 205, 205);
                  display: flex;
                  align-items: center;
                  justify-content: space-around;
                }
              }
            }
          }
          .audio {
            .card_list_item {
              width: 100%;
              .audio_item {
                width: 100%;
                height: 100%;
                padding: 10px;
                .icon_box {
                  width: 28px;
                  height: 28px;
                  margin-right: 14px;
                }
                .center_box {
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                }
              }
            }
          }
        }
      }
    }
  }
  .footer {
    background-color: #fff;
    height: 70px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .button {
      width: 80%;
    }
    .GoDest {
      width: 100%;
      display: flex;
      justify-content: center;
      .button {
        width: 40%;
        margin: 0 10px;
        &.save {
          background-color: #fff !important;
          border: 1px solid rgb(11, 187, 203);
          color: #0bbbcb !important;
        }
      }
    }
  }
  //弹窗样式
  .popup_content {
    position: relative;
    padding: 20px 0;
    height: 240px;
    border-radius: 11px 11px 0px 0px;
    background: rgb(247, 249, 252);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &.GoDest {
      height: 300px;
    }
    .uni-icons {
      position: absolute;
      top: 10px;
      right: 10px;
    }
    .title {
      width: 100%;
      position: absolute;
      top: 20px;
      .title_text {
        flex-direction: column;
      }
    }
    .popup_item {
      .item_content {
        .image_box {
          flex-direction: column;
          .icon_box {
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 55px;
            height: 55px;
            border-radius: 50%;
            box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.04);
            margin: 8px 10px;
          }
          &.sex_item {
            .icon_box.active {
              border: 2px solid rgb(11, 187, 203);
            }
          }
        }
      }
      &.GoDest {
        width: 100%;
        height: 100%;
        padding: 40px;
        .scroll_view {
          height: 100%;
        }
        .item_content {
          flex-direction: column;
        }
        .item {
          width: 80%;
          text-align: center;
          padding: 10px;
          margin: 10px 0;
          border-radius: 6px;
          /* 内容 */
          box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.04);
          /* bg/纯白 */
          background: rgb(255, 255, 255);
          &.active {
            border: 1px solid rgb(3, 191, 198);
            border-radius: 6px;
            /* 内容 */
            box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.04);
            background: rgb(242, 251, 251);
          }
        }
      }
    }
    .audio {
      .del_audio {
        width: 56px !important;
        height: 56px !important;
        background-color: rgb(246, 71, 87) !important;
      }
      .play_audio {
        width: 84px !important;
        height: 84px !important;
      }
      .choose_audio {
        width: 56px !important;
        height: 56px !important;
        background-color: rgb(11, 187, 203) !important;
      }
    }
    .confirm {
      padding: 10px;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.08);
      background: rgb(255, 255, 255);
      justify-content: center;
      .button {
        width: 60%;
        height: 40px;
        line-height: 40px;
        justify-content: center;
      }
    }
  }
}
</style>
